@import (once) "../../include/vars";
@import (once) "../../include/mixins";

@activityRingTime: 4000ms;
@activityRingSize: 32px;
@activityColor: @white;
@activityColorDark: @dark-gray;
@activityRingRotate: -14deg;
@activityRingTimeMute: 30;

:root {
    --activity-ring-time: @activityRingTime;
    --activity-ring-time-mute: @activityRingTimeMute;
    --activity-ring-size: @activityRingSize;
    --activity-ring-rotate: @activityRingRotate;
    
    --activity-color: #191919;
}

.dark-side {
    --activity-color: #ffffff;
}

.activity {
    &-ring {
        position: relative;

        padding-top: .22rem;
        width: @activityRingSize;
        height: @activityRingSize;
        margin: .625rem;

        & > .wrap {
            position: absolute;
            width: @activityRingSize - 2;
            height: @activityRingSize - 2;

            & > .circle {
                opacity: 0;
                width: @activityRingSize - 2;
                height: @activityRingSize - 2;
                .rotate(225deg);
                .animate(orbit @activityRingTime infinite);

                &:after {
                    position: absolute;
                    content: '';
                    width: (@activityRingSize / 8);
                    height: (@activityRingSize / 8);
                    border-radius: (@activityRingSize / 8);
                    background: var(--activity-color);
                }
            }

            &:nth-child(2) {
                .rotate(@activityRingRotate);
                & > .circle {
                    animation-delay: (@activityRingTime / @activityRingTimeMute);
                }
            }

            &:nth-child(3) {
                .rotate(@activityRingRotate*2);
                & > .circle {
                    animation-delay: (@activityRingTime / @activityRingTimeMute*2);
                }
            }

            &:nth-child(4) {
                .rotate(@activityRingRotate*3);
                & > .circle {
                    animation-delay: (@activityRingTime / @activityRingTimeMute*3);
                }
            }

            &:nth-child(5) {
                .rotate(@activityRingRotate*4);
                & > .circle {
                    animation-delay: (@activityRingTime / @activityRingTimeMute*4);
                }
            }
        }

        &.color-style {
            & > .wrap {
                & > .circle {
                    &:after {
                        background-color: @cyan;
                    }
                }
            }
            & > .wrap:nth-child(2) {
                & > .circle {
                    &:after {
                        background-color: @orange;
                    }
                }
            }
            & > .wrap:nth-child(3) {
                & > .circle {
                    &:after {
                        background-color: @green;
                    }
                }
            }
            & > .wrap:nth-child(4) {
                & > .circle {
                    &:after {
                        background-color: @red;
                    }
                }
            }
            & > .wrap:nth-child(5) {
                & > .circle {
                    &:after {
                        background-color: @yellow;
                    }
                }
            }
        }
    }

    &-metro {
        overflow: hidden;
        position: relative;

        width: 100%;
        height: 10px;
        background-color: @transparent;

        & > .circle {
            display: inline-block;
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: var(--activity-color);
            opacity: 0;
            margin-left: 5px;
            animation: activity-metro-slide 3s cubic-bezier(.1,.85,.9,.15) infinite, metro-opacity 2s ease-in-out infinite alternate;

            &:nth-child(2){
                animation-delay: .8s;
            }
            &:nth-child(3){
                animation-delay: .7s;
            }
            &:nth-child(4){
                animation-delay: .6s;
            }
            &:nth-child(5){
                animation-delay: .5s;
            }
        }

        &.color-style {
            & > .circle {
                background-color: @cyan;
            }
            & > .circle:nth-child(2) {
                background-color: @orange;
            }
            & > .circle:nth-child(3) {
                background-color: @green;
            }
            & > .circle:nth-child(4) {
                background-color: @red;
            }
            & > .circle:nth-child(5) {
                background-color: @yellow;
            }
        }
    }

    &-square {
        position: relative;
        width: 40px;
        height: 40px;
        overflow: hidden;
        transform-origin: bottom left;
        animation: activity-shrink 1s linear infinite;

        .square {
            position: absolute;
            width: 19px;
            height: 19px;
            background: var(--activity-color);

            &:nth-child(1) {
                left: 0;
                top: 21px;
            }

            &:nth-child(2) {
                left: 21px;
                top: 21px;
                animation: activity-drop 1s linear infinite;
            }

            &:nth-child(3) {
                left: 0;
                top: 0;
                animation: activity-drop2 1s linear infinite;
            }

            &:nth-child(4) {
                left: 21px;
                top: 0;
                animation: activity-drop3 1s linear infinite;
            }
        }

        &.color-style {

            & > .square:nth-child(1) {
                background-color: @orange;
            }

            & > .square:nth-child(2) {
                background-color: @green;
            }

            & > .square:nth-child(3) {
                background-color: @cyan;
            }

            & > .square:nth-child(4) {
                background-color: @yellow;
            }
        }
    }

    &-cycle {
        width: 64px;
        height: 64px;
        position: relative;
        overflow: hidden;

        .cycle {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 64px;
            height: 64px;
            margin: -32px 0 0 -32px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: var(--activity-color);
            animation: activity-pre-spin 1s linear infinite;
            z-index: 1001;

            &::before, &::after {
                content: "";
                position: absolute;
                border-radius: 50%;
                border: 3px solid transparent;
                border-top-color: var(--activity-color);
            }

            &:before {
                top: 5px;
                left: 5px;
                right: 5px;
                bottom: 5px;
                animation: activity-pre-spin 2s linear infinite;
            }

            &:after {
                top: 15px;
                left: 15px;
                right: 15px;
                bottom: 15px;
                animation: activity-spin 1.5s linear infinite;
            }
        }

        &.color-style {
            .cycle {
                border-top-color: @cyan;

                &:before {
                    border-top-color: @red;
                }

                &:after {
                    border-top-color: @yellow;
                }
            }
        }
    }

    &-simple {
        @sizeA: 64;
        @sizeB: 64;

        .square(@sizeA, px);

        .circular{
            animation: activity-rotate 2s linear infinite;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .path {
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0;
            animation: activity-dash 1.5s ease-in-out infinite;
            stroke-linecap: round;
            stroke: var(--activity-color);
        }

        &.color-style .path{
            animation: activity-dash 1.5s ease-in-out infinite, activity-color 6s ease-in-out infinite;
        }


        &.small {
            .square((@sizeA/2), px);
            border-radius: 50%;
            .circular {
                .square((@sizeA/2), px);
            }
        }
    }

    &-atom {
        @size: 64;

        .square(@size, px);
        border-radius: 50%;
        perspective: 800px;

        span {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;

            &:nth-child(1) {
                left: 0;
                top: 0;
                animation: activity-rotate-one 1s linear infinite;
                border-bottom: 3px solid;
                border-bottom-color: var(--activity-color);
            }

            &:nth-child(2) {
                right: 0;
                top: 0;
                animation: activity-rotate-two 1s linear infinite;
                border-right: 3px solid;
                border-right-color: var(--activity-color);
            }

            &:nth-child(3) {
                right: 0;
                bottom: 0;
                animation: activity-rotate-three 1s linear infinite;
                border-top: 3px solid;
                border-top-color:  var(--activity-color);
            }
        }

        &.color-style span {
            &:nth-child(1) {
                border-bottom-color: @cyan;
            }

            &:nth-child(2) {
                border-right-color: @red;
            }

            &:nth-child(3) {
                border-top-color: @yellow;
            }
        }
    }

    &-bars {
        width: 60px;
        height: 50px;

        span {
            height: 100%;
            width: 8px;
            display: inline-block;
            float: left;
            margin-left: 2px;
            animation: activity-bars 0.8s infinite ease-in-out;
            background-color: var(--activity-color);

            &:nth-child(1) {
            }
            &:nth-child(2) {
                animation-delay: -0.7s;
            }
            &:nth-child(3) {
                animation-delay: -0.6s;
            }
            &:nth-child(4) {
                animation-delay: -0.5s;
            }
            &:nth-child(5) {
                animation-delay: -0.4s;
            }
            &:nth-child(6) {
                animation-delay: -0.3s;
            }
        }

        &.color-style span {
            &:nth-child(1) {
                background-color: @violet;
            }
            &:nth-child(2) {
                background-color: @cyan;
            }
            &:nth-child(3) {
                background-color: @green;
            }
            &:nth-child(4) {
                background-color: @yellow;
            }
            &:nth-child(5) {
                background-color: @orange;
            }
            &:nth-child(6) {
                background-color: @pink;
            }
        }
    }
}

@keyframes activity-rotate{
    100%{
        transform: rotate(360deg);
    }
}

@keyframes activity-dash{
    0%{
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}

@keyframes activity-color{
    100%, 0%{
        stroke: @red;
    }
    40%{
        stroke: @blue;
    }
    66%{
        stroke: @green;
    }
    80%, 90%{
        stroke: @yellow;
    }
}

@keyframes activity-rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes activity-rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes activity-rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

@keyframes activity-bars {
    0%, 40%, 100% {
        transform: scaleY(0.05);
    }
    20% {
        transform: scaleY(1.0);
    }
}

@keyframes activity-drop {
    0% {
        transform: translateY(-50px);
    }
    25% {
        transform: translate(0);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes activity-drop2 {
    0% {
        transform: translateY(-50px);
    }
    50% {
        transform: translate(0);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes activity-drop3 {
    0% {
        transform: translateY(-50px);
    }
    75% {
        transform: translate(0);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes activity-pre-spin {
    0%   {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes activity-metro-slide {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

.dialog {
    &.no-shadow {
        box-shadow: none!important;
    }
}